/** IT存储面板部件 
 * Author:      yangjq 
 * CreateTime:  2023/9/7 16:24:15 
 * LastEditor:  yangjq 
 * ModifyTime:  2023/12/5 20:35:23 
 * Description: 
*/ 
<template>
  <div class="main-card">
    <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 25%">
      <img src="/images/screen-it/存储资源-B.png" style="height: 80px; width: 80px;" />
      <div style="font-size: 20px; margin-top: 10px">存储资源</div>
      <div style="font-size: 12px; margin-top: 0px">{{IndexLabel}}</div>
    </div>
    <div style="width: 75%;padding-left: 4px;"> 
        <!-- <el-carousel-item> -->
          <div style="display:flex;justify-content: space-between; align-items: center; /* 垂直居中 */">
            <EchartsPie
              :chartData="storageData.nowProduct"
              ids="realtime1"
              :percentValue="storageData.productPercent"
              :totalValue="storageData.countProduct"
              title="生产存储"
              theme="#FF3300"
              style="height: 16.87vh;margin-left:20px;width:40%;"
            >
            </EchartsPie>
            <EchartsPie
              :chartData="storageData.nowBackups"
              ids="realtime2"
              :percentValue="storageData.backupsPercent"
              :totalValue="storageData.countBackups"
              title="备份存储"
              theme="#0066FF"
              style="height: 16.87vh;margin-left:20px;width:40%;"
            >
            </EchartsPie>
          </div>
        <!-- </el-carousel-item>
      </el-carousel> -->
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, Ref, reactive, watchEffect, onMounted,onUnmounted} from 'vue';
import {useECharts} from '/@/hooks/web/useECharts';
import {defHttp} from "/@/utils/http/axios";
import EchartsPie from './EchartsPie.vue';

const IndexLabel = ref('(容量)');
const doPlay = (value) => {
  if(value==0){
    IndexLabel.value = '(容量)';
    return;
  }

  if(value==1){
    IndexLabel.value = '(品牌)';
    return;
  }
};

const storageData = ref({
  nowProduct: 2300,
  countProduct: 4500,
  nowBackups: 3600,
  countBackups: 7000,
  productPercent:0.45,
  backupsPercent:0.60
})

function loadData() {
  let list = []
  let api = "/j_monitoring/licenseSoftware/readStorageSettingJson";
  let params = {};
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        let record = JSON.parse(res.result.value)
        Object.assign(storageData.value, record);
        storageData.value.productPercent = Number((storageData.value.nowProduct/(storageData.value.countProduct||100)).toFixed(4)),
        storageData.value.backupsPercent = Number((storageData.value.nowBackups/(storageData.value.countBackups||100)).toFixed(4)),
        list = record.brandList ? record.brandList : [];
        for (var i = 0; i < list.length; i++) {
          var capacityArr = [list[i]['brand'], list[i]['capacity']];
          var numberArr = [list[i]['brand'], list[i]['number']];
          console.log(capacityArr)
          console.log(numberArr)
        }

      } else {
        console.log('接口错误用默认');
      }
    }).finally(() => {
  });
};
let timer;
onMounted(() => {
  loadData();
  timer = setInterval(() => {
    loadData();
  }, 60*60000); // 根据需要调整滚动间隔
});

onUnmounted(()=>{
  if(timer){
    clearInterval(timer);
  }
});
</script>

<style scoped lang="less"> 

.main-card {
  display: flex; 
  flex-direction: row; 
  color: whitesmoke; 
  height: 100%; 
  width: 100%; 
  padding: 10px 10px 0px 10px;
}

.part-container {
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  align-items: baseline;
  font-size: 20px;
}
.part-content{
  color: #d93d09;
  font-weight: 400;
  font-size: 22px;
  margin-left: 10px;
  margin-right: 10px;
}
.part-icon {
  width: 24px;
  height: 24px;
  margin-top: 16px;
  margin-right: 8px;
}

.part-header {
  font-weight: normal;
  font-size: 20px;
}

.part-footer {
  font-weight: normal;
  font-size: 16px;
}

.data-focus {
  font-size: 2.2rem;
  font-weight: 500;
}

.data-normal {
  font-size: 1.8rem;
  font-weight: 400;
  opacity: 0.8;
}

.led-cls {
  font-family: 'electronicFont';    
}
</style>
